import React, { Component } from 'react'
import { connect } from 'dva';
import { Form, Input, Select } from 'antd';
import { SearchRow, SearchCol, SearchButton } from '@/styled/form';

interface Props {
  current: number,
  form: any,
  dispatch?: Function,
  handleExport?: Function,
  initCurrent?: Function,
  status?: any,
  type?: any
}

const FormItem = Form.Item;
const Option = Select.Option;

@connect()
class Search extends Component<Props, any> {

  state = {
    startNum: '',
    endNum: '',
    status: ''
  };

  componentDidMount() {
    const { status } = this.props;
    this.setState({
      status
    });
  }

  search = e => {
    e.preventDefault();
    const { dispatch } = this.props;
    let dispatchType = '';
    switch (this.props.type) {
      case '1':
        dispatchType = 'analyse_device/updateFireHostCond';
        break;
      case '2':
        dispatchType = 'analyse_device/updateSmartSmokeCond';
        break;
      case '3':
        dispatchType = 'analyse_device/updateWisdomElectriccityCond';
        break;
      case '4':
        dispatchType = 'analyse_device/updateOutdoorFireHydrantCond';
        break;
      case '5':
        dispatchType = 'analyse_device/updateCameraCond';
        break;
      case '6':
        dispatchType = 'analyse_device/updateTransmissionCond';
        break;
      case '7':
        dispatchType = 'analyse_device/updateDeviceFireHostChildCond';
        break;
      case '8':
        dispatchType = 'analyse_device/updateDeviceFlameCond';
        break;
    }
    this.props.form.validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: dispatchType,
          payload: {
            pageNum: 1,
            pageSize: 10,
            status: this.state.status,
            ...values
          }
        });
        this.props.initCurrent()
      }
    });
  };

  changeExport = () => {
    this.props.handleExport();
  };

  render() {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    return (
      <Form onSubmit={this.search}>
        <SearchRow>
          <SearchCol key={0} span={3}>
            <FormItem
            >
              {getFieldDecorator('selectedRate', {
                initialValue: this.state.status
              })(
                <Select>
                  <Option value="1" key="1">完好</Option>
                  <Option value="2" key="2">损坏</Option>
                </Select>
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={1} span={7}>
            <FormItem
              label="连续报警数"
              {...formItemLayout}
            >
              <>
                <Input style={{ 'width': '40%' }} placeholder="起" value={this.state.startNum} onChange={(ev) => { this.setState({ startNum: ev.target.value }) }} />
              </>
              ~
              <>
                <Input style={{ 'width': '40%', 'marginLeft': '10px' }} placeholder="止" value={this.state.endNum} onChange={(ev) => { this.setState({ endNum: ev.target.value }) }} />
              </>
            </FormItem>
          </SearchCol>
          <SearchCol key={2} span={6}>
            <FormItem
              label="损坏持续时间"
              {...formItemLayout}
            >
              {getFieldDecorator('groupId')(
                <Input placeholder="请输入时间" />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={3} span={6} style={{ marginLeft: '10px' }}>
            <SearchButton htmlType="submit">搜索</SearchButton>
            <SearchButton onClick={() => {
              this.props.form.resetFields();
              this.setState({
                startNum: '',
                endNum: ''
              })
            }} style={{ 'marginLeft': '15px' }}>重置</SearchButton>
            <SearchButton style={{ 'marginLeft': '15px' }} onClick={this.changeExport}>导出</SearchButton>
          </SearchCol>
        </SearchRow>
      </Form>
    );
  }
}

const SearchS = Form.create<Props>()(Search);
export default SearchS;
